<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>全部分类</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <link rel="stylesheet" href="./css/classify.css" />
</head>

<body>
  <!-- 头部区域 -->
  <header>
    <h1>全部分类</h1>
  </header>
  <!-- 主体区域 -->
  <div class="main" id="app">
    <!-- 搜索框 -->
    <div class="search">
      <div class="input">
        <span class="iconfont icon-sousuo"></span> 搜索商品
      </div>
    </div>
    <!-- 左区域 -->
    <div class="left">
      <span v-for="(item,index) in recommendList" :key="index" :class="{active:indexData===index}"
        @click="change(index)">{{item.name}}</span>
    </div>
    <!-- 右区域 -->
    <div class="right">
      <a href="#" v-for="item in goodsList" @click="gogogo(item.category_id)">
        <img :src="item.image.external_url" alt="" />
        <p>{{item.name}}</p>
      </a>

    </div>
  </div>
  <!-- 底部区域 -->
  <footer>
    <a href="./index.html">
      <span class="iconfont icon-shouye"></span>
      <p>首页</p>
    </a>
    <a href="./classify.html" class="active">
      <span class="iconfont icon-tubiao_fenlei"></span>
      <p>分类</p>
    </a>
    <a href="./shopingcart.html">
      <span class="iconfont icon-gouwuche"></span>
      <p>购物车</p>
    </a>
    <a href="./my.html">
      <span class="iconfont icon-wode-copy"></span>
      <p>我的</p>
    </a>
  </footer>
  <script src="./js/axios.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/classify.js"></script>
</body>

</html>